<template>
	<view class="inviteFriends">
        <SRV-topbar :title="pageTitle" :isLeft="true"></SRV-topbar>
		<view v-for="(item,index) in pageResult.list" :key="index" class="line">
            <view class="monthTotal">
                <view class="month">{{item.month}}</view>
                <view class="total" style="width: 30%;text-align: center;">订单数：{{item.totalNum}}</view>
                <view class="total" style="width: 40%;text-align: right;">总金额：{{item.totalMoney}}</view>
            </view>
			<view  v-for="(item2,index2) in item.childList" :key="index2" class="left">
				<view class="dateSn">
                    <view class="date">{{item2.createTime}}</view>
                    <view class="sn">{{item2.sn}}</view>
                </view>
                <view class="moneyInfo">
                    {{item2.balance_info}} = {{item2.balance_money}}
                </view>
			</view>
		</view>
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
		</view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'" v-if="bindInfo.state == 1">
		    <view class="right" style="width:100%;">
		        <view class="pay" @click="showCode()"  style="width:100%;">{{bindInfo.title}}</view>
		    </view>
		</view>
	</view>
</template>

<script>
    var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
    import uniQrcode from '../static/wxqrcode.js';
	export default {
		data() {
			return {
				pageTitle: '',
                pageParam: {
                	appkey: uni.getStorageSync('appkey'),
                	'access-token': uni.getStorageSync('access-token'),
                    id: 0,
                	month: 0,
                },
                pageResult: {
                	list: [],
                	isEmpty: false,
                	isEnd: false
                },
			}
		},
		methods: {
			getList(){
				serve.request({
					url: '/member/merchant/turnover-list',
					data: _self.pageParam,
                    v: '/v3'
				}).then(res => {
					if (res.data.list && res.data.list.length > 0) {
					    _self.pageResult.list = _self.pageResult.list.concat(res.data.list);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0;
					_self.pageParam.month = res.data.month;
					
					_self.$forceUpdate();
				});
			},
            
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
                this.bottomHeight = 178;
            }
            _self = this;
            _self.pageParam.id = option.id || 0;
			_self.pageTitle = (option.title || "") + "业务流水";
			_self.pageParam.month = 0;
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.month = 0;
			_self.pageResult.list = [];
			_self.getList();
		},
		onReachBottom() {
			if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
				return
			}
			_self.getList();
		}
	}
</script>

<style scoped lang="scss">
	.inviteFriends {
		
		.line {
			border: 8rpx rgba(57, 72, 107, 0.1) solid;
            border-radius: 20rpx;
            margin: 10rpx;
            .monthTotal {    
                padding: 10rpx;
                    display: flex;
                    border-bottom: 1px solid;
                    .month {
                        width: 30%;
						font-size: 36rpx;
						font-weight: 600;
                    }
            }
            .dateSn {
                    display: flex;
                    padding: 10rpx;
                    border-bottom: 1px solid #dedede;
                    .date {
                        width: 50%;
                    }
            }
            .moneyInfo {
                    display: flex;
                        padding: 10rpx;
                    .batch {
                        width: 50%;
                    }
            }
			
		}
		.left {
			margin: 5px;
			border: 1px solid;
			border-radius: 10px;
			padding: 5px;
        }
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
	}
</style>
